@import "../styles/rotateIn.scss";
$criclefontsize:2.1863rem;

@mixin bordercolor{
    border: 1px solid rgba(42,43,250,8);
    border-left-color: rgba(42,43,250,.6);
    border-right-color: rgba(42,43,250,.6);
    border-top-color: rgba(42,43,250,.4);

}

.loop{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    background-color: transparent;
    border-radius: 50%;
    @include bordercolor;

    li{
        width: $criclefontsize;
        height:$criclefontsize;
        position: absolute;
        // background: url("../static/cricle.svg") no-repeat;
        // background-size: contain;
        color: #B6DBFB ;
        text-align: center;
        z-index:99999;
            font-weight: 500;

    }

    .active{
        color:#FFB000 ;
        .CircleContent{
            z-index: 999999;
            position: relative;
            .animate-content{
              @include flexstyle;
                  line-height: 0;

            }
        }
        .rotate{
            @include animated
        }
        .rotate-in{
            @include animated
        }
        .rotate-out{
            @include animatedR
        }
    }
}
.loop::before{
    content: "";
    width: 106%;
    height: 98%;
@include bordercolor;
    position: absolute;
    top: 1%;
    left: -3%;
    border-radius: 50%;
}
.loop::after{
    content: "";
    width: 96%;
    height: 94%;
@include bordercolor;
    position: absolute;
    top: 3%;
    left: 2%;
    border-radius: 50%;
}
.li1{
    top: 100%;
    left: 50%;
}

    @mixin live15{
        width:0.1rem;
        height: 0.1rem;
    }
    @mixin ellipsis{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @mixin labelcolor {
        color: #00D7FF
    }

.CircleContent{
width: 100%;
    height: 100%;
    @include flexstyle;
    padding:19% 10%;
    border-radius: 50%;

    .main-content{
            width: 100%;
    @include flexstyle;

        div{
            width: 100%;
            // line-height: 0.3rem;
            font-size: 0.3rem;
                @include flexstyle;
    height: 0.35rem;

        }
        label{
            width: 100%;
            font-size: 0.16rem;
            display: inline-block;
            @include labelcolor;
            @include flexstyle;
    height: 0.2333rem;
    font-weight: bold;

        }
            // height: 0.53rem;
            font-size: 0.9rem;


    }

    .animate-content{
        display: none;

            width: 100%;
           font-size: 0.9rem;


    
    }
    .animate-content-element{
    width: 50%;
    height: 0.3367rem;
    @include flexstyle;


        div{
            font-size: 0.1333rem;
            @include flexstyle;
            width:100%;
            color: #ADF6FF 

        }
        label{
            font-size: 0.1067rem;
            @include labelcolor;
                 width:100%;
    @include flexstyle;


        }
    }
}
.CircleCenter{
    width:100%;
    height:100%;
    text-align: center;
    .titleIncomeCombination{
        position: absolute;
        width: 100%;
        top:0;
    }
}
.IncomeCombination{
    display: flex;
    justify-content: center;
}